<template>
  <div class="app-container2 weixiu_wrap">
    <div class="left_box">
      <commonTree2 />
    </div>
    <div class="right_box">
      <div class="right_main">
        <div class="right_main_top">
          <div class="common_title_wrap">
            <div class="common_title_btns">
              <div class="common_title_btn">加入关键设备清单</div>
              <div class="common_title_btn">导入关键设备清单</div>
            </div>
          </div>
          <div class="right_content_wrap">
            <el-table
              height="style"
              class="jk_common_table004"
              :data="tableData"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column label="序号" align="center" width="50">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="sbid"
                label="设备编号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="sbName"
                label="设备名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="gnms"
                label="设备功能描述"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="gzmode"
                label="故障模式"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="right_main_center">
          <div class="center_items11">
            <div class="common_title_wrap">
              <div class="common_title_btn">一层逻辑决断</div>
            </div>
            <div class="items11_content">
              <div class="items11_info">
                <div>显示一层逻辑决断模型决策过程问题1-5</div>
                <div>返回设备故障模式的决断结果</div>
              </div>
              <div class="items11_btns">
                <div class="items11_btn">是</div>
                <div class="items11_btn">否</div>
              </div>
            </div>
          </div>
          <div class="center_items11">
            <div class="common_title_wrap">
              <div class="common_title_btn">二层逻辑决断</div>
            </div>
            <div class="items11_content">
              <div class="items11_info">
                <div>显示二层逻辑决断模型决策过程问题</div>
              </div>
              <div class="items11_btns">
                <div class="items11_btn">是</div>
                <div class="items11_btn">否</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_main_bottom">
          <div class="common_title_wrap"></div>
          <div class="right_content_wrap">
            <div class="table_warpper">
              <el-table
                height="style"
                class="jk_common_table004"
                :data="tableData2"
                border
                style="width: 100%; height: 100%"
              >
                <el-table-column
                  prop="xh"
                  label="设备型号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="设备名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwId"
                  label="任务号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwName"
                  label="任务名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="sxyxlx"
                  label="失效影响类型"
                  width="110"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwmd"
                  label="任务目的"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwlx"
                  label="任务类型"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwjg"
                  label="任务间隔"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwms"
                  label="任务描述"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="sfdhb"
                  label="是否待合并"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="rwbz"
                  label="任务步骤"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="szqy"
                  label="所在区域"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="wzData"
                  label="xxx"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
            <div class="common_title_wrap">
              <div class="common_title_btn">维修工单保存</div>
              <div class="common_title_btn">维修工单导出</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import commonTree2 from "../../../components/commonTree2";
export default {
  components: { commonTree2 },
  data() {
    return {
      tableData: [
        {
          sbid: "D211",
          sbName: "设备001",
          gnms: "....",
          gzmode: "-",
        },
        {
          sbid: "D212",
          sbName: "设备002",
          gnms: "....",
          gzmode: "-",
        },
        {
          sbid: "D213",
          sbName: "设备003",
          gnms: "....",
          gzmode: "-",
        },
        {
          sbid: "D214",
          sbName: "设备004",
          gnms: "....",
          gzmode: "-",
        },
      ],
      tableData2: [
        {
          id: "1",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "2",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "3",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "4",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "5",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "6",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
        {
          id: "7",
          xh: "-",
          name: "-",
          rwId: "-",
          rwName: "-",
          sxyxlx: "-",
          rwmd: "-",
          rwlx: "-",
          rwjg: "-",
          rwms: "-",
          sfdhb: "-",
          rwbz: "-",
          szqy: "-",
          wzData: "-",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
$modelCreatebgColor: #0d1e3c;
.weixiu_wrap {
  width: 100%;
  display: flex;
  .left_box {
    flex: 0 0 auto;
  }
  .right_box {
    margin-left: 20px;
    width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    .right_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(to bottom, #0c1e3b, #163368);
      .right_main_top {
        flex: 2 1 auto;
        height: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .common_title_wrap {
          background: transparent;
          .common_title_btns {
            display: flex;
            align-items: center;
            .common_title_btn {
              width: 192px;
              margin-right: 20px;
            }
          }
        }
        .right_content_wrap {
          width: 100%;
          flex: 1 1 auto;
          height: 0;
        }
      }
      .right_main_center {
        flex: 0 0 auto;
        display: flex;
        margin: 16px 0;
        height: 210px;
        justify-content: space-between;
        .center_items11 {
          width: 48%;
          height: 100%;
          box-sizing: border-box;
          border: 2px solid #21569f;
          display: flex;
          flex-direction: column;
          .items11_content {
            flex: 1 1 auto;
            width: 100%;
            height: 0;
            display: flex;
            flex-direction: column;
            .items11_info {
              flex: 1 1 auto;
              font-size: 18px;
              color: #ccc;
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            .items11_btns {
              flex: 0 0 auto;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              margin-bottom: 14px;
              box-sizing: border-box;
              padding: 0 30px;
              .items11_btn {
                width: 50px;
                text-align: center;
                font-size: 20px;
                height: 32px;
                line-height: 32px;
                color: #ccc;
                margin-left: 20px;
                background: linear-gradient(
                  to right,
                  #247ab7,
                  #279cce,
                  #247ab7
                );
                cursor: pointer;
                &:first-child {
                  margin-left: 0;
                }
                &:hover {
                  opacity: 0.9;
                }
              }
            }
          }
        }
      }
      .right_main_bottom {
        flex: 3 1 auto;
        width: 100%;
        height: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 2px solid #21569f;
        .right_content_wrap {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
          display: flex;
          flex-direction: column;
          .table_warpper {
            flex: 1 1 auto;
            width: 100%;
            height: 0;
          }
          .common_title_wrap {
            justify-content: flex-end;
            background: transparent;
            .common_title_btn {
              margin-left: 20px;
            }
          }
        }
      }
      .common_title_wrap {
        flex: 0 0 auto;
        width: 100%;
        height: 62px;
        background: linear-gradient(to bottom, #134183, #113b78);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 12px;
        .common_title_btn {
          width: 160px;
          text-align: center;
          font-size: 20px;
          height: 32px;
          line-height: 32px;
          color: #ccc;
          background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }
}
</style>
